<template>
	<div class="numberBase">
    <div class="hei10"></div>
        <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
          当前位置：
          <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
          <router-link to="/productionBasismanag" style="color: #409eff;">产品渠道管理</router-link>>
          号库管理
        </div>

        <div class="hei10"></div>
		<div class="team">
			<div class="powertop">
				<router-link class="powertopli " to="/productionBasismanag/numberManagement/number">号码管理</router-link>
				<router-link class="powertopli powertopact" to="/productionBasismanag/numberManagement/numberBase">号库管理</router-link>
			</div>
		</div>
		<div class="content">
		    <div class="flex">
		       <el-button type="danger" @click="numberbaselog = true" v-if="func_E01">添加号库</el-button>

               <div class="add">
               	<el-input placeholder="号库名称" v-model="search" class="input-with-select"></el-input>
               	<el-button type="danger" @click="searchgo" icon="el-icon-search"></el-button>
               </div>
		    </div>
		</div>
		<div class="con" v-loading="loading">
			<div class="list">
				<div class="th">号库名称</div>
				<div class="th">运营商</div>
				<div class="th">状态</div>
		        <div class="th">统计（可用）</div>
		        <div class="th">统计（全部）</div>
                <div class="th">备注说明</div>
                <div class="th">操作</div>
			</div>
			<div class="list" v-for="item in list" :key="item.id">
				<div class="td">{{item.name}}</div>
				<div class="td">{{item.type}}</div>
		        <div class="td">{{item.status}}</div>
		        <div class="td">{{item.available}}</div>
                <div class="td">{{item.count_all}}</div>
                <div class="td">{{item.description}}</div>
				<div class="td">
		            <el-button type="primary" size="mini" v-if="func_E01" plain @click="del(item.id)">删除</el-button>
		            <el-button type="primary" size="mini" v-if="func_E01" plain @click="fix(item.id)">编辑</el-button>
		        </div>
			</div>
			<el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
		</div>
        <el-dialog title="新增号库":visible.sync="numberbaselog" width="400px">
        	  <div class="randomdiv">
                      <el-form ref="form" @submit.native.prevent :model="form" label-width="80px">
                              <el-form-item label="号库名称">
                                <el-input v-model="form.name" placeholder="号库名称"></el-input>
                              </el-form-item>
                              <el-form-item label="运营商">
                                <el-select v-model="form.type" placeholder="运营商">
                                  <el-option label="联通" value="1"></el-option>
                                  <el-option label="移动" value="2"></el-option>
                                  <el-option label="电信" value="3"></el-option>
                                </el-select>
                              </el-form-item>
                              <el-form-item label="状态">
                                <el-select v-model="form.status" placeholder="状态">
                                  <el-option label="可用" value="1"></el-option>
                                  <el-option label="停用" value="2"></el-option>
                                </el-select>
                              </el-form-item>
                              <el-form-item label="备注说明">
                                <el-input type="textarea" v-model="form.description"></el-input>
                              </el-form-item>
                      </el-form>
              </div>
        	  <span slot="footer" class="dialog-footer">
        		<el-button @click="numberbaselog = false">取 消</el-button>
        		<el-button type="primary" @click="numberbasego">确 定</el-button>
        	  </span>
        </el-dialog>
        <el-dialog title="修改号库":visible.sync="fixnumberbaselog" width="400px">
        	  <div class="randomdiv">
                      <el-form ref="form" @submit.native.prevent :model="fixform" label-width="80px">
                              <el-form-item label="号库名称">
                                <el-input v-model="fixform.name" placeholder="号库名称"></el-input>
                              </el-form-item>
                              <el-form-item label="运营商">
                                <el-select v-model="fixform.type" placeholder="运营商">
                                  <el-option label="联通" value="1"></el-option>
                                  <el-option label="移动" value="2"></el-option>
                                  <el-option label="电信" value="3"></el-option>
                                </el-select>
                              </el-form-item>
                              <el-form-item label="状态">
                                <el-select v-model="fixform.status" @change="changes" placeholder="状态">
                                  <el-option label="可用" value="1"></el-option>
                                  <el-option label="停用" value="2"></el-option>
                                </el-select>
                              </el-form-item>
                              <el-form-item label="备注说明">
                                <el-input type="textarea" v-model="fixform.description"></el-input>
                              </el-form-item>
                      </el-form>
              </div>
        	  <span slot="footer" class="dialog-footer">
        		<el-button @click="fixnumberbaselog = false">取 消</el-button>
        		<el-button type="primary" @click="fixnumberbasego">确 定</el-button>
        	  </span>
        </el-dialog>
	</div>

</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	export default{
		components: {
			"left": left,
			"top": top
		},
		name : "numberBase",
		data(){
			return {
                numberbaselog:false,
                fixnumberbaselog:false,
                search:"",
                loading:true,
				time:"",
                numberbase:"",
                status:"",
                phone:"",
                page:1,
                pagesize:20,
                total:0,
                form:{
                    type:"",
                    name:"",
                    description:"",
                    status:"",
                    cate:""
                },
                fixform:{
                    pool_id:"",
                    type:"",
                    name:"",
                    description:"",
                    status:"",
                    cate:""
                },
                list:[],
                func_E01:false
			}
		},
		created() {
			this.getlist()

            //权限问题
            var user = JSON.parse(localStorage.getItem('USER'));
            this.user_func = user.functions
            for( var i in this.user_func){
                var func_number = this.user_func[i].code
                if(func_number.indexOf("E01") >= 0){ this.func_E01 = true }
            }
		},
		mounted(){

		},
		methods: {
      changes:function(){
        if(this.fixform.status == 2){
          this.$alert('停用后所有关联该号池的产品都将自动取消关联', '重要提示', {
            confirmButtonText: '确定'
          });
        }
      },
            //添加
            numberbasego:function(){

                var that = this
                var params = new URLSearchParams();

                params.append('name', this.form.name);
                params.append('status', this.form.status);
                params.append('type', this.form.type);
                params.append('description', this.form.description);

                axios.post('/api/plan-market/pool/add', params)
                	.then(response => {
                		if(response.data.msg.code != 0){
                			this.$message.error(response.data.msg.info);
                		}else{
                			that.numberbaselog = false
                            this.loading = true
                			this.$message({
                			  message: '新建号库成功！',
                			  type: 'success'
                			});
                			that.getlist()
                		}
                	})
            },
            //修改
            fixnumberbasego:function(){
                var that = this
                var params = new URLSearchParams();
                params.append('pool_id', this.fixform.pool_id);
                params.append('name', this.fixform.name);
                params.append('status', this.fixform.status);
                params.append('type', this.fixform.type);
                params.append('description', this.fixform.description);

                axios.post('/api/plan-market/pool/add', params)
                	.then(response => {
                		if(response.data.msg.code != 0){
                			this.$message.error(response.data.msg.info);
                		}else{
                			that.fixnumberbaselog = false
                            that.loading = true
                			this.$message({
                			  message: '修改号库成功！',
                			  type: 'success'
                			});
                			that.getlist()
                		}
                	})
            },
            //获取号池
            getlist:function(){
                var that = this
                axios.get('/api/plan-market/pool/list?page='+this.page+'&page_size='+this.pagesize+'&name='+this.search)
                	.then(response => {
                        that.total = response.data.data.total
                        for( var i in response.data.data.data){
                            if(response.data.data.data[i].status == 1){
                                response.data.data.data[i].status = "可用"
                            }
                            if(response.data.data.data[i].status == 2){
                                response.data.data.data[i].status = "停用"
                            }

                            if(response.data.data.data[i].type == 1){
                                response.data.data.data[i].type = "联通"
                            }
                            if(response.data.data.data[i].type == 2){
                                response.data.data.data[i].type = "移动"
                            }
                            if(response.data.data.data[i].type == 3){
                                response.data.data.data[i].type = "电信"
                            }
                        }
                		that.list = response.data.data.data
                		that.loading = false
                	})
            },
            //删除
            del:function(id){
                this.$confirm('删除此号库，使用号库的商品会受到影响， 是否继续?', '提示', {
                	  confirmButtonText: '确定',
                	  cancelButtonText: '取消',
                	  type: 'warning'
                }).then(() => {
                	  var that = this
                	  that.loading = true
                	  var params = new URLSearchParams();
                	  params.append('pool_id', id);
                	  axios.post('/api/plan-market/pool/delete', params)
                	  	.then(response => {
                	  		if(response.data.msg.code != 0){
                	  			this.$message.error(response.data.msg.info);
                	  		}else{
                	            this.loading = true
                	  			this.$message({
                	  			  message: '删除号库成功！',
                	  			  type: 'success'
                	  			});
                	  			that.getlist()
                	  		}
                	  	})
                })

            },
            //搜索
			searchgo:function(){
                this.page = 1
                this.loading = true
                this.getlist()
            },
            //点击修改按钮获取详情
            fix:function(id){

                this.fixnumberbaselog = true
                var that = this
                axios.get('/api/plan-market/pool/info?id='+id)
                	.then(response => {
                        if(response.data.data.status == 1){
                            response.data.data.status = "1"
                        }
                        if(response.data.data.status == 2){
                            response.data.data.status = "2"
                        }
                        if(response.data.data.type == 1){
                            response.data.data.type = "1"
                        }
                       if(response.data.data.type == 2){
                           response.data.data.type = "2"
                       }
                       if(response.data.data.type == 3){
                           response.data.data.type = "3"
                       }
                		that.fixform = response.data.data

                        that.fixform.pool_id = id;
                	})

            },
            //翻页
            fanye:function(page){
            	this.loading = true
            	this.page = page
            	this.getlist()
            },
		}
	}
</script>

<style lang="scss" scoped>
	.numberBase{
		.content{
		    padding: 20px;
		    .flex{
		        display: flex; margin-bottom: 20px; justify-content: space-between;
		        .el-select{ margin-left: 20px;}
		        .phone{ width: 300px; }
		    }
            .add{
            	text-align: right; position: relative;
            	.input-with-select{ width: 280px;}
            	.el-button{ position: absolute; right: 0; top: 0;}
            }
		}
		.con{
		    .list{
		    	display: flex; text-align: center; color: #727272; line-height: 45px; border-top: 1px #EAEAEA solid; border-bottom: 1px #EAEAEA solid; margin-top: -1px;
		    	.th{ flex: 1; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid; }
		    	.td{ flex: 1; font-size: 14px; border-right:1px #EAEAEA solid; }
		    }
		    .el-pagination{ text-align: right; margin: 20px 0}
		}
        .team{ background: #F9F9F9;}
        .powertop{ display: flex; width: 640px; }
        .powertopli{ flex-basis: 160px; line-height: 45px; border-top: 4px #F9F9F9 solid; color: #727272; border-right: 1px #EAEAEA solid; font-size: 14px; text-align: center;}
        .powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}

	}
</style>
